<template>
	<div class="wechatPay">
		<div style="margin-bottom: 25px;padding-left: 15px;">
			<span style="color: red;font-size: 14px;padding-right: 15px;">温馨提示: 如果商户类型为企业，则微信结算账户必须为对公账户！</span>
		</div>
		<el-card>
			<div class="wechatPay-form">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
					<el-form-item label="开户银行全称(含支行)" prop="bankBranchId">
						<el-select v-model="ruleForm.bankBranchId" :remote-method="remoteMethod" :loading="loading"
							remote filterable placeholder="请选择开户银行全称(含支行)" clearable style="width: 310px;">
							<el-option v-for="item in options" :key="item.bankBranchId" :label="item.bankName"
								:value="item.bankBranchId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="管理员姓名" prop="contactName">
						<el-input v-model="ruleForm.contactName" clearable style="width: 310px;"
							placeholder="请输入姓名,例如:张三"></el-input>
					</el-form-item>
					<el-form-item label="管理员身份证件号码" prop="contactIdCardNumber">
						<el-input v-model="ruleForm.contactIdCardNumber" clearable style="width: 310px;"
							placeholder="请输入身份证件号码,例如:6121121219212812"></el-input>
					</el-form-item>
					<el-form-item label="管理员联系手机" prop="mobilePhone">
						<el-input v-model="ruleForm.mobilePhone" clearable style="width: 310px;" placeholder="请输入手机号码">
						</el-input>
					</el-form-item>
					<el-form-item label="管理员联系邮箱" prop="contactEmail">
						<el-input v-model="ruleForm.contactEmail" clearable style="width: 310px;"
							placeholder="请输入邮箱,例如:819902233@qq.com"></el-input>
					</el-form-item>
					<el-form-item label="管理员类型" prop="contactType">
						<el-select v-model="ruleForm.contactType" placeholder="请选择管理员类型" clearable
							style="width: 310px;">
							<el-option label="经营者/法人" value="65"></el-option>
							<el-option label="负责人" value="66"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="开户银行" prop="accountBank">
						<el-autocomplete style="width: 310px;" v-model="ruleForm.accountBank"
							:fetch-suggestions="querySearch" placeholder="请输入开户银行,例如:中国银行"  clearable></el-autocomplete>
					</el-form-item>

					<el-form-item label="开户名称" prop="accountName">
						<div style="display: flex;align-items: center;">
							<el-input v-model="ruleForm.accountName" clearable style="width: 310px;"
								placeholder="请输入开户名称"></el-input>
							<span style="color:red;font-size: 12px;padding-left: 15px;"> *对公为营业执照企业名称,个人银行卡则为法人名字</span>
						</div>

					</el-form-item>

					<el-form-item label="银行帐号" prop="accountNumber">
						<el-input v-model="ruleForm.accountNumber" clearable style="width: 310px;"
							placeholder="请输入银行帐号,例如:6217002610007655214"></el-input>
					</el-form-item>

					<el-form-item label="开户银行省市编码" prop="bankAddressCode">
						<el-cascader :props="{'value':'regionCode','label':'regionName'}" v-model="proives"
							:options="proivce" @change="proivceHandleChange" clearable></el-cascader>
						<el-cascader :props="{'value':'regionCode','label':'regionName'}" v-model="citys"
							:options="city" @change="cityHandleChange" clearable style="margin:0 10px"></el-cascader>
						<el-cascader :props="{'value':'regionCode','label':'regionName'}" v-model="areas"
							:options="area" clearable></el-cascader>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">提交申请</el-button>
						<el-button type="default" @click="goOff()">返回</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: '',
				loading: false,
				content: '',
				btnType: '提交申请',
				ruleForm: {
					"bankBranchId": "", //开户银行联行号
					"contactName": "", //管理员姓名
					"contactIdCardNumber": "", //管理员身份证件号码
					"mobilePhone": "", //管理员手机
					"contactEmail": "", //管理员邮箱
					"contactType": "", //管理员类型
					"accountBank": '', //开户银行
					"accountName": '', //开户名称
					"accountNumber": '', //银行帐号
					"bankAddressCode": '' //开户银行省市编码
				},
				restaurants:[
					{"value": "工商银行"},
					{"value": "交通银行"},
					{"value": "招商银行"},
					{"value": "民生银行"},
					{"value": "中信银行"},
					{"value": "浦发银行"},
					{"value": "兴业银行"},
					{"value": "光大银行"},
					{"value": "广发银行"},
					{"value": "平安银行"},
					{"value": "北京银行"},
					{"value": "华夏银行"},
					{"value": "农业银行"},
					{"value": "建设银行"},
					{"value": "邮政储蓄银行"},
					{"value": "中国银行"},
					{"value": "宁波银行"}
				],
				rules: {
					bankBranchId: [{
						required: true,
						message: '请选择开户银行联行号',
						trigger: 'change'
					}],
					contactName: [{
						required: true,
						message: '请输入管理员姓名',
						trigger: 'blur'
					}],
					contactIdCardNumber: [{
						required: true,
						message: '请输入管理员身份证件号码',
						trigger: 'blur'
					}],
					mobilePhone: [{
						required: true,
						message: '请输入联系手机',
						trigger: 'blur'
					}],
					contactEmail: [{
						required: true,
						type: 'email',
						message: '请输入正确的联系邮箱地址',
						trigger: 'blur'
					}],
					contactType: [{
						required: true,
						message: '请输入选择管理员类型',
						trigger: 'change'
					}],
				},
				parent_code: '',
				proives: '',
				citys: '',
				areas: '',
				proivce: [],
				city: [],
				area: []
			}
		},
		mounted() {
			this.getBank();
			this.getCity();
			this.ruleForm = {
				"bankBranchId": "", //开户银行联行号
				"contactName": "", //管理员姓名
				"contactIdCardNumber": "", //管理员身份证件号码
				"mobilePhone": "", //管理员手机
				"contactEmail": "", //管理员邮箱
				"contactType": "", //管理员类型
				"accountBank": '', //开户银行
				"accountName": '', //开户名称
				"accountNumber": '', //银行帐号
				"bankAddressCode": '' //开户银行省市编码
			}
			if (this.$route.query.type == 2) {
				this.btnType = '修改申请';
				this.getData();
			}
		},
		methods: {
			querySearch(queryString, cb) {
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},
			getCity() {
				this.$http.get(this.$api.city, {
					parent_code: this.parent_code
				}).then(res => {
					this.proivce = res.data;
				})
			},
			proivceHandleChange(val) {
				this.city = [];
				this.area = []
				this.$http.get(this.$api.city, {
					parent_code: val[0]
				}).then(res => {
					this.city = res.data;
				})
			},
			cityHandleChange(val) {
				this.area = []
				this.$http.get(this.$api.city, {
					parent_code: val[0]
				}).then(res => {
					this.area = res.data;

				})
			},
			remoteMethod(query) {
				if (query !== '') {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						this.content = query;
						this.getBank();
					}, 200);
				} else {
					this.options = [];
				}
			},
			getBank() {
				this.$http.get(this.$api.bankList, {
					content: this.content,
					page: 1,
					size: 300
				}).then(res => {
					if (res.code == 0) {
						this.options = res.data.list;
					}
				})
			},
			getData() {
				this.$http.get(this.$api.queryPayChannel + '/wx-online/info').then(res => {
					if (res.code == 0) {
						this.ruleForm = res.data;
					}
				})
			},
			submitForm(formName) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.ruleForm.bankAddressCode = this.areas[0] ? this.areas[0].split(',')[0] : this.citys[0] ? this.citys[0]
					.split(',')[0] : this.proives[0] ? this.proives[0].split(',')[0] : '';
				if (this.btnType == '提交申请') {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.$http.post(this.$api.wxOnline, this.ruleForm).then(res => {
								if (res.code == 0) {
									this.$http.post(this.$api.secUpdate + '/wx-online').then(res => {
										if (res.code == 0) {
											this.$message({
												type: 'success',
												message: '申请成功！'
											});
											this.$router.push('/merchantInfo');
										} else {
											this.$message({
												type: 'error',
												duration: 0,
												showClose: true,
												message: res.msg
											});
										}
									})
								} else {
									this.$message({
										type: 'error',
										duration: 0,
										showClose: true,
										message: res.msg
									});
								}
								loading.close();
							})
						} else {
							loading.close();
							return false;
						}
					});
				} else {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.$http.put(this.$api.wxOnline, this.ruleForm).then(res => {
								if (res.code == 0) {
									this.$http.post(this.$api.secUpdate + '/wx-online').then(res => {
										if (res.code == 0) {
											this.$message({
												type: 'success',
												message: '修改成功！'
											});
											this.$router.push('/merchantInfo');
										} else {
											this.$message({
												type: 'error',
												duration: 0,
												showClose: true,
												message: res.msg
											});
										}
									})
								} else {
									this.$message({
										type: 'error',
										duration: 0,
										showClose: true,
										message: res.msg
									});
								}
								loading.close();
							})
						} else {
							loading.close();
							return false;
						}
					});
				}


			},
			goOff() {
				this.$router.go(-1);
			},
		}
	}
</script>

<style scoped>
	.wechatPay {
		padding: 15px;
	}

	/* .wechatPay-form {
		max-width: 460px;
	} */
</style>
